import style from 'styled-components'

export const HomeWrapper = style.div`
  width: 960px;
  margin: 30px auto 0;
  overflow: hidden;
`
export const HomeLeft = style.div`
  width: 625px;
  float: left;
  margin-left: 15px
  .banner-img{
    width: 100%;
    height: 270px;
  }
`

export const HomeRight = style.div`
  width: 280px;
  float: right;
`
// Topic
export const TopicWrapper = style.div`
  width: 100%;
  margin: 20px 0;
  overflow: hidden;
  border-bottom: 1px solid #f0f0f0;
  .topic-more {
    float: left;
    line-height: 32px;
    height: 32px;
    color: #787878;
    font-size:14px;
    cursor: pointer;
  }
`

export const TopicItem = style.div`
  float:left;
  line-height: 32px;
  height: 32px;
  margin: 0 18px 18px 0;
  padding-right: 11px;
  background: #f7f7f7;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  font-size: 14px;
  overflow:hidden;
  .topic-img {
    display: block;
    float: left;
    width: 32px;
    height: 32px;
    display: inline-block;
    margin-right:11px;
  }
`

// LIST
export const ListWrapper = style.div`
  
`
export const ListItem = style.div`
  overflow: hidden;
  border-bottom: 1px solid #f0f0f0;
  margin: 0 0 15px;
  padding: 15px 2px 20px 0;
  .list-img{
    float: right;
    width: 125px;
    height: 100px;
    border-radius: 4px;
    border: 1px solid #f0f0f0;
    box-sizing: border-box;
  }
  .list-content{
    float: left;
    width: 480px;
    box-sizing: border-box;
    .list-title{
      font-size: 18px;
      font-weight: 700;
      line-height: 30px;
    }
    .list-abstract{
      font-size: 13px;
      color: #999;
      line-height: 24px;
      margin: 0 0 8px;
    }
  }
`

// Recommend

export const RecommendWrapper = style.div`
  width: 100%;
  min-height: 228px;
  margin-top: -4px;
  padding-bottom: 4px;
`
export const RecommendItem = style.div`
  width: 100%;
  height: 50px;
  margin-bottom: 6px;
  border-radius: 4px;
  background: url(${(props)=> {return props.imgSrc}});
  background-size: contain;
`

// Writter
export const WriterWrapper = style.div`
  margin: 10px 0 20px;
  width: 280px;
  box-sizing: border-box;
`

export const WriterTitle = style.div`
  width: 100%;
  font-size: 14px;
  color: #969696;
  overflow: hidden;
  .title-change{
    float: right;
    .spin{
      font-size:12px;
    }
  }
`
export const WriterItem = style.div`
  width: 100%;
  margin-top: 15px;
  line-height: 20px;
  display: flex;
  .writer-avatar{
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    img{
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .writer-content{
    flex: 1;
    margin: 5px 10px 0;
    .writer-name{
      font-size: 14px;
    }
    .writer-detail{
      margin-top: 2px;
      font-size: 12px;
      color: #969696;
    }
  }
  .writer-look{
    margin-top: 5px;
    font-size: 13px;
    color: #42c02e;
    cursor: pointer;
  }
`